<template>
  <div class="myorder">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <!-- tab切换 -->
    <el-tabs :tab-position="tabPosition" class="tab">
      <el-tab-pane label="全部">全部</el-tab-pane>
      <el-tab-pane label="待付款">
        <div>待付款</div>
      </el-tab-pane>
      <el-tab-pane label="待培训"><p>待培训</p></el-tab-pane>
      <el-tab-pane label="已完成">已完成</el-tab-pane>
      <el-tab-pane label="已关闭">已关闭</el-tab-pane>
    </el-tabs>
    

   
    <!-- 网络状态不佳 -->
    <div class="content">
      <div class="noorder" v-show="noorder">
        <img src="../assets/noorder_03.png" alt />
      </div>
      <div class="nowifi" v-show="nowifi">
        <img src="../assets/nowifi_03.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import heade from "../components/heade";
export default {
  name: "myorder",
  data() {
    return {
      title: "我的订单",
      tabPosition: "top",
      noorder: false,
      nowifi: false,
      activeName: "second"
    };
  },
  components: {
    heade
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
</style>
<style lang="less">
.myorder {
  width: 100%;
  height: 100%;
  font-size: 0;
  background: #f8f8f8;
  .mint-header {
    background-color: #fff;
    color: rgb(49, 49, 49);
    font-family: AdobeHeitiStd-Regular;
    font-size: 0.3rem;
  }
  // tab
  .el-tabs--top {
    background: #fff;
  }
  .el-tabs__item {
    font-size: 0.12rem;
  }
  .tab {
    width: 100%;
    height: 4rem;
    border: 1px solid red;
    text-indent: 0.1rem;
  }
  .el-tabs__nav {
    text-align: center;
  }
  .el-tabs__item {
    text-align: center;
    padding: 0 0.4rem;
  }
  //
  .content {
    width: 100%;
    margin-top: 0.2rem;
    background-color: #fff;
    background: red;
    .noorder {
      width: 2.71rem;
      margin: 0 auto;
      padding-top: 3rem;
      box-sizing: border-box;
      img {
        width: 100%;
      }
    }
    .nowifi {
      width: 3.49rem;
      margin: 0 auto;
      padding-top: 3rem;
      box-sizing: border-box;
      img {
        width: 100%;
      }
    }
  }
}
</style>